import React, { useState, useEffect } from 'react';
import { Card, Row, Col, Spin } from 'antd';
import { BarChart, Bar, LineChart, Line, PieChart, Pie, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Cell } from 'recharts';
import { getChartData } from '../services/api';
import './Charts.css';

const Charts = () => {
  const [chartData, setChartData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchChartData();
  }, []);

  const fetchChartData = async () => {
    setLoading(true);
    try {
      const data = await getChartData();
      setChartData(data);
    } catch (error) {
      console.error('Failed to fetch chart data:', error);
    }
    setLoading(false);
  };

  // 销售趋势数据
  const salesTrendData = chartData?.salesTrend || [];

  // 订单状态分布数据
  const orderStatusData = chartData?.orderStatus || [];
  const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

  // 产品销售分布数据
  const productSalesData = chartData?.productSales || [];

  return (
    <div className="charts-container">
      <div className="charts-header">
        <h1>数据报表</h1>
      </div>

      <Spin spinning={loading} tip="加载中...">
        {!loading && chartData && (
          <Row gutter={[16, 16]}>
            {/* 销售趋势图表 */}
            <Col xs={24} md={24} lg={12}>
              <Card title="销售趋势" className="chart-card">
                <ResponsiveContainer width="100%" height={300}>
                  <LineChart data={salesTrendData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="date" />
                    <YAxis />
                    <Tooltip />
                    <Legend />
                    <Line type="monotone" dataKey="sales" stroke="#8884d8" activeDot={{ r: 8 }} />
                  </LineChart>
                </ResponsiveContainer>
              </Card>
            </Col>

            {/* 订单状态分布图表 */}
            <Col xs={24} md={24} lg={12}>
              <Card title="订单状态分布" className="chart-card">
                <ResponsiveContainer width="100%" height={300}>
                  <PieChart>
                    <Pie
                      data={orderStatusData}
                      cx="50%"
                      cy="50%"
                      labelLine={false}
                      outerRadius={100}
                      fill="#8884d8"
                      dataKey="value"
                      label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
                    >
                      {orderStatusData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                      ))}
                    </Pie>
                    <Tooltip />
                  </PieChart>
                </ResponsiveContainer>
              </Card>
            </Col>

            {/* 产品销售分布图表 */}
            <Col xs={24} md={24} lg={24}>
              <Card title="产品销售分布" className="chart-card">
                <ResponsiveContainer width="100%" height={300}>
                  <BarChart data={productSalesData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="name" />
                    <YAxis />
                    <Tooltip />
                    <Legend />
                    <Bar dataKey="sales" fill="#82ca9d" />
                  </BarChart>
                </ResponsiveContainer>
              </Card>
            </Col>
          </Row>
        )}
      </Spin>
    </div>
  );
};

export default Charts;